<template>
  <div>
    <el-upload
      style="width: 100%"
      ref="importFileUploader"
      :action="importFileUrl"
      :headers="uploadHeaders"
      accept=".jpg,.jpeg,.png"
      :multiple="false"
      :before-upload="beforeUpload"
      :on-success="handleUploadSuccess"
      :data="upLoadData"
      :auto-upload="true"
      name="file"
      :limit="1"
    >
      <el-button slot="trigger" size="small" type="primary">选取图片</el-button>
    </el-upload>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";

export default {
  name: "picUpload",
  props: {},
  data() {
    return {
      upLoadData: {},
      importFileUrl: `${process.env.BASE_API}/dms/student/uploadIDCard`,
      uploadHeaders: {
        Authorization: getToken(),
      },
    };
  },
  computed: {},
  methods: {
    beforeUpload(file) {
      const extension = file.name.split(".")[1] === "jpg";
      const extension1 = file.name.split(".")[1] === "jpeg";
      const extension2 = file.name.split(".")[1] === "png";
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!extension && !extension1 && !extension2) {
        this.$message.error("导入文件只支持jpg和png文件");
        this.$refs.importFileUploader.clearFiles();
      }
      if (!isLt10M) {
        this.$message.error("导入文件小于10M");
        this.$refs.importFileUploader.clearFiles();
      }
    },
    handleUploadSuccess(res, file) {
      console.log(res);
      if (res.code === 200) {
        this.$emit("selectPic", res.data);
      } else {
        this.$message({
          message: res.msg,
          type: "error",
        });
      }
    },
  },
};
</script>
<style>
</style>


